<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Badge 徽标 | Dwen Design Uni</title>
    <meta name="description" content="一个参照wot-design打造的uni-app组件库">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/assets/style.DnOYZxeG.css" as="style">
    
    <script type="module" src="/assets/app.YW-MkW57.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.LvXlqbtp.js">
    <link rel="modulepreload" href="/assets/chunks/theme.BM8XoXPd.js">
    <link rel="modulepreload" href="/assets/component_badge.md.a2KdDsHN.lean.js">
    <link rel="icon" href="/favicon.ico">
    <script>(function(n){"use strict";(function(a){var s=window,e=document,c=n,o="".concat(e.location.protocol==="https:"?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),t=e.createElement("script"),i=e.getElementsByTagName("script")[0];t.type="text/javascript",t.setAttribute("charset","UTF-8"),t.async=!0,t.src=o,t.id="LA_COLLECT",c.d=t;var r=function(){s.LA.ids.push(c)};s.LA?s.LA.ids&&r():(s.LA=n,s.LA.ids=[],r()),i.parentNode.insertBefore(t,i)})()})({id:"3J4q4tM6fN0n1fbZ",ck:"3J4q4tM6fN0n1fbZ"});</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-f854f7a1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-b651c03c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-b651c03c> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f854f7a1 data-v-18afcad6><div class="VPNavBar has-sidebar top" data-v-18afcad6 data-v-af094541><div class="wrapper" data-v-af094541><div class="container" data-v-af094541><div class="title" data-v-af094541><div class="VPNavBarTitle has-sidebar" data-v-af094541 data-v-b838adee><a class="title" href="/" data-v-b838adee><!--[--><!--]--><!--[--><img class="VPImage logo" src="/wot-design.png" alt data-v-0c1a2309><!--]--><span data-v-b838adee>Dwen Design Uni</span><!--[--><!--[--><!--[--><!--[--><span class="el-tag el-tag--small el-tag--plain" style="background-color:;vertical-align:middle;margin-left:8px;" text><span class="el-tag__content"><!--[-->1.4.0<!--]--></span><!--v-if--></span><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-af094541><div class="content-body" data-v-af094541><!--[--><!--]--><div class="VPNavBarSearch search" data-v-af094541><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-af094541 data-v-2db0ea54><span id="main-nav-aria-label" class="visually-hidden" data-v-2db0ea54>Main Navigation</span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-2db0ea54 data-v-1a1992a0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-1a1992a0><span class="text" data-v-1a1992a0><!----><span data-v-1a1992a0>指南</span><span class="vpi-chevron-down text-icon" data-v-1a1992a0></span></span></button><div class="menu" data-v-1a1992a0><div class="VPMenu" data-v-1a1992a0 data-v-72808daa><div class="items" data-v-72808daa><!--[--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link" href="/guide/introduction.html" data-v-e7cb82b4><!--[-->介绍<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link" href="/guide/quick-use.html" data-v-e7cb82b4><!--[-->快速上手<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-2db0ea54 data-v-1a1992a0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-1a1992a0><span class="text" data-v-1a1992a0><!----><span data-v-1a1992a0>组件</span><span class="vpi-chevron-down text-icon" data-v-1a1992a0></span></span></button><div class="menu" data-v-1a1992a0><div class="VPMenu" data-v-1a1992a0 data-v-72808daa><div class="items" data-v-72808daa><!--[--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link" href="/component/button.html" data-v-e7cb82b4><!--[-->基础组件<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-2db0ea54 data-v-1a1992a0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-1a1992a0><span class="text" data-v-1a1992a0><!----><span data-v-1a1992a0>周边生态</span><span class="vpi-chevron-down text-icon" data-v-1a1992a0></span></span></button><div class="menu" data-v-1a1992a0><div class="VPMenu" data-v-1a1992a0 data-v-72808daa><div class="items" data-v-72808daa><!--[--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link vp-external-link-icon" href="https://github.com/Moonofweisheng/wot-demo" target="_blank" rel="noreferrer" data-v-e7cb82b4><!--[-->快速上手项目<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link vp-external-link-icon" href="https://moonofweisheng.github.io/uni-mini-router/" target="_blank" rel="noreferrer" data-v-e7cb82b4><!--[-->Vue3 uni-app路由库<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link vp-external-link-icon" href="https://github.com/Moonofweisheng/uni-mini-ci" target="_blank" rel="noreferrer" data-v-e7cb82b4><!--[-->多平台小程序CI工具<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-72808daa data-v-e7cb82b4><a class="VPLink link vp-external-link-icon" href="https://uni-helper.js.org/" target="_blank" rel="noreferrer" data-v-e7cb82b4><!--[-->Uni Helper<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-af094541 data-v-52c9419f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-52c9419f data-v-4121e615 data-v-451650c8><span class="check" data-v-451650c8><span class="icon" data-v-451650c8><!--[--><span class="vpi-sun sun" data-v-4121e615></span><span class="vpi-moon moon" data-v-4121e615></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-af094541 data-v-9c48b82c data-v-1a1992a0><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-1a1992a0><span class="vpi-more-horizontal icon" data-v-1a1992a0></span></button><div class="menu" data-v-1a1992a0><div class="VPMenu" data-v-1a1992a0 data-v-72808daa><!----><!--[--><!--[--><!----><div class="group" data-v-9c48b82c><div class="item appearance" data-v-9c48b82c><p class="label" data-v-9c48b82c>Appearance</p><div class="appearance-action" data-v-9c48b82c><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-9c48b82c data-v-4121e615 data-v-451650c8><span class="check" data-v-451650c8><span class="icon" data-v-451650c8><!--[--><span class="vpi-sun sun" data-v-4121e615></span><span class="vpi-moon moon" data-v-4121e615></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-af094541 data-v-ba2ca797><span class="container" data-v-ba2ca797><span class="top" data-v-ba2ca797></span><span class="middle" data-v-ba2ca797></span><span class="bottom" data-v-ba2ca797></span></span></button></div></div></div></div><div class="divider" data-v-af094541><div class="divider-line" data-v-af094541></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-f854f7a1 data-v-bf68961d><div class="container" data-v-bf68961d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bf68961d><span class="vpi-align-left menu-icon" data-v-bf68961d></span><span class="menu-text" data-v-bf68961d>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bf68961d data-v-0d76a66b><button data-v-0d76a66b>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-f854f7a1 data-v-22ca6cf3><div class="curtain" data-v-22ca6cf3></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-22ca6cf3><span class="visually-hidden" id="sidebar-aria-label" data-v-22ca6cf3> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-22ca6cf3><section class="VPSidebarItem level-0 collapsible" data-v-22ca6cf3 data-v-b4b1f935><div class="item" role="button" tabindex="0" data-v-b4b1f935><div class="indicator" data-v-b4b1f935></div><h2 class="text" data-v-b4b1f935>基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b4b1f935><span class="vpi-chevron-right caret-icon" data-v-b4b1f935></span></div></div><div class="items" data-v-b4b1f935><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b4b1f935 data-v-b4b1f935><div class="item" data-v-b4b1f935><div class="indicator" data-v-b4b1f935></div><a class="VPLink link link" href="/component/button.html" data-v-b4b1f935><!--[--><p class="text" data-v-b4b1f935>Button 按钮</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f854f7a1 data-v-d9eb1ee8><div class="VPDoc has-sidebar has-aside" data-v-d9eb1ee8 data-v-5edabbdd><!--[--><!--]--><div class="container" data-v-5edabbdd><div class="aside" data-v-5edabbdd><div class="aside-curtain" data-v-5edabbdd></div><div class="aside-container" data-v-5edabbdd><div class="aside-content" data-v-5edabbdd><div class="VPDocAside" data-v-5edabbdd data-v-66aaf645><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-66aaf645 data-v-0ee9f7b3><div class="content" data-v-0ee9f7b3><div class="outline-marker" data-v-0ee9f7b3></div><div class="outline-title" role="heading" aria-level="2" data-v-0ee9f7b3>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-0ee9f7b3><span class="visually-hidden" id="doc-outline-aria-label" data-v-0ee9f7b3> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-0ee9f7b3 data-v-c0b79822><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-66aaf645></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-5edabbdd><div class="content-container" data-v-5edabbdd><!--[--><!--]--><main class="main" data-v-5edabbdd><div style="position:relative;" class="vp-doc _component_badge" data-v-5edabbdd><div><!----><h1 id="badge-徽标" tabindex="-1">Badge 徽标 <a class="header-anchor" href="#badge-徽标" aria-label="Permalink to &quot;Badge 徽标&quot;">​</a></h1><p>出现在按钮、图标旁的数字或状态标记。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p>展示新消息数量。</p><p>定义<code>modelValue</code>属性，它接受<code>Number</code>或者<code>String</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;12&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;12px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="修改背景色" tabindex="-1">修改背景色 <a class="header-anchor" href="#修改背景色" aria-label="Permalink to &quot;修改背景色&quot;">​</a></h2><p>设置 <code>type</code> 属性，也可以自定义背景色 <code>bg-color</code>，也可以通过<code>custom-class</code>定义组件样式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;badge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;pink&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;badge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;badge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;badge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;badge&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">inline-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="最大值" tabindex="-1">最大值 <a class="header-anchor" href="#最大值" aria-label="Permalink to &quot;最大值&quot;">​</a></h2><p>可自定义最大值。</p><p>由<code>max</code>属性定义，它接受一个<code>Number</code>，需要注意的是，只有当<code>modelValue</code>为<code>Number</code>时，它才会生效。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;200&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;99&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="展示-0-值" tabindex="-1">展示 0 值 <a class="header-anchor" href="#展示-0-值" aria-label="Permalink to &quot;展示 0 值&quot;">​</a></h2><p>可使用<code>show-zero</code>属性，自定义是否展示 <code>0</code> 值。需要注意的是，<code>is-dot</code> 属性优先级高于 <code>show-zero</code> 属性，<code>is-dot</code>为<code>true</code>时将始终显示红点。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;99&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> show-zero</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义内容" tabindex="-1">自定义内容 <a class="header-anchor" href="#自定义内容" aria-label="Permalink to &quot;自定义内容&quot;">​</a></h2><p>可以显示数字以外的文本内容。</p><p>定义<code>modelValue</code>为<code>String</code>类型是时可以用于显示自定义文本。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;new&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;评论&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;回复&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="点状标注" tabindex="-1">点状标注 <a class="header-anchor" href="#点状标注" aria-label="Permalink to &quot;点状标注&quot;">​</a></h2><p>以红点的形式标注需要关注的内容。</p><p>除了数字外，设置<code>is-dot</code>属性，它接受一个<code>Boolean</code>。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> is-dot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;数据查询&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> is-dot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;share-button&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>v-model</td><td>显示值</td><td>string / number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>max</td><td>最大值，超过最大值会显示 &#39;{max}+&#39;，要求 value 是 Number 类型</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>top</td><td>为正时，角标向下偏移对应的像素</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>right</td><td>为正时，角标向左偏移对应的像素</td><td>number</td><td>-</td><td>-</td><td>-</td></tr><tr><td>is-dot</td><td>红色点状标注</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>hidden</td><td>隐藏 badge</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>type</td><td>类型</td><td>string</td><td>primary / success / warning / danger / info</td><td>-</td><td>-</td></tr><tr><td>bg-color</td><td>背景色</td><td>string</td><td>各种颜色的css写法</td><td>-</td><td>-</td></tr><tr><td>show-zero</td><td>是否显示0</td><td>boolean</td><td>-</td><td>false</td><td>0.1.62</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to &quot;外部样式类&quot;">​</a></h2><table><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-5edabbdd data-v-897a62c0><!--[--><!--]--><!----><nav class="prev-next" data-v-897a62c0><div class="pager" data-v-897a62c0><!----></div><div class="pager" data-v-897a62c0><a class="VPLink link pager-link next" href="/component/button.html" data-v-897a62c0><!--[--><span class="desc" data-v-897a62c0>Next page</span><span class="title" data-v-897a62c0>Button 按钮</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f854f7a1 data-v-0edd8128><div class="container" data-v-0edd8128><p class="message" data-v-0edd8128>Released under the MIT License.</p><p class="copyright" data-v-0edd8128>Copyright © 2024-present dwen</p></div></footer><!--[--><footer class="VPFooter has-sidebar" data-v-b0942627><div class="container" data-v-b0942627><p class="message" data-v-b0942627>Released under the MIT License.</p><p class="copyright" data-v-b0942627>Copyright © 2024-present dwen</p></div></footer><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"component_divider.md\":\"DAzggrln\",\"component_backtop.md\":\"bw0zyUYg\",\"component_card.md\":\"D560US3m\",\"component_button.md\":\"BSSMeapS\",\"component_config-provider.md\":\"zkZR-QBR\",\"component_fab.md\":\"D9Up1InT\",\"component_loading.md\":\"mf1pJuAM\",\"component_overlay.md\":\"DRsgD2i-\",\"component_img-cropper.md\":\"B2jVeqEL\",\"component_datetime-picker-view.md\":\"Cc8jtwYu\",\"component_pagination.md\":\"CJA3fO1K\",\"component_datetime-picker.md\":\"CUzqRV_V\",\"component_count-down.md\":\"CYkKxc-P\",\"component_calendar.md\":\"CzbUUU8n\",\"component_badge.md\":\"a2KdDsHN\",\"component_cell.md\":\"D3AvBtBu\",\"component_img.md\":\"D9e04oi_\",\"index.md\":\"qx3ztIdt\",\"component_rate.md\":\"BtrQHYpH\",\"component_popover.md\":\"BwJwSlyS\",\"component_action-sheet.md\":\"Crhf_-uN\",\"component_drop-menu.md\":\"Deqg7euO\",\"component_password-input.md\":\"B_XTnTUH\",\"component_icon.md\":\"BMOGbegI\",\"component_layout.md\":\"NyTAcCBe\",\"component_col-picker.md\":\"D2V2xBQm\",\"component_count-to.md\":\"CjK31Fcz\",\"component_notice-bar.md\":\"BvVOqAnz\",\"component_select-picker.md\":\"BxJdqw1S\",\"component_floating-panel.md\":\"DB8zwIEZ\",\"component_tooltip.md\":\"Q2WK47QN\",\"component_gap.md\":\"BLUG-u77\",\"component_toast.md\":\"CdUEsOpt\",\"component_progress.md\":\"OxPv8oWe\",\"component_keyboard.md\":\"CXLZCcgp\",\"guide_introduction.md\":\"CFovz7Cm\",\"component_checkbox.md\":\"gynvix7N\",\"reward_donor.md\":\"C_4NCZe9\",\"component_resize.md\":\"BNrPH5nx\",\"guide_join-group.md\":\"DMXZlw_1\",\"reward_living.md\":\"Cg-OqN3D\",\"component_transition.md\":\"CEK_3MKS\",\"component_slider.md\":\"CznyFKp5\",\"component_picker-view.md\":\"DGXrwT0O\",\"component_switch.md\":\"Cz7G__un\",\"guide_custom-theme.md\":\"0UiOK4kQ\",\"reward_reward.md\":\"DOb8TuWR\",\"component_skeleton.md\":\"Mm9_J-JT\",\"guide_quick-use.md\":\"D64exm4r\",\"component_text.md\":\"B_ic82aQ\",\"component_circle.md\":\"CnsdYC2i\",\"component_popup.md\":\"G_wEqPXv\",\"component_radio.md\":\"CgBp5b0D\",\"component_steps.md\":\"CSUp2aDh\",\"component_message-box.md\":\"D8f25-Eb\",\"component_input-number.md\":\"6bgL3laR\",\"component_curtain.md\":\"BOdGVrfz\",\"component_grid.md\":\"CAQt64De\",\"component_notify.md\":\"CH_U7jYm\",\"component_calendar-view.md\":\"DCciGyEH\",\"component_search.md\":\"B1BtPEPy\",\"component_watermark.md\":\"WDSrat4V\",\"component_status-tip.md\":\"DACnPcbG\",\"component_navbar.md\":\"C5KZxctP\",\"component_index-bar.md\":\"3joKTy6S\",\"guide_typography.md\":\"Bc_se1Gi\",\"component_form.md\":\"B6NSr4Oc\",\"component_sort-button.md\":\"NPbBCKjz\",\"component_input.md\":\"DrmfDb4V\",\"guide_common-problems.md\":\"CBMtDoNo\",\"component_textarea.md\":\"_aP6kCVB\",\"guide_locale.md\":\"DGxcKE1m\",\"component_sticky.md\":\"BiMkIQuu\",\"component_swiper.md\":\"CjM-wZG7\",\"component_tag.md\":\"Dy-vvMe6\",\"component_number-keyboard.md\":\"DUPxedUm\",\"component_tabs.md\":\"BLnZP_kR\",\"component_loadmore.md\":\"TFtCIriT\",\"component_collapse.md\":\"DwXZUxdA\",\"component_segmented.md\":\"BcndgjJn\",\"component_tabbar.md\":\"Lj7MdFdc\",\"component_swipe-action.md\":\"CRjZqicQ\",\"component_picker.md\":\"2I-Z2riA\",\"component_table.md\":\"Cakq2Sck\",\"component_sidebar.md\":\"DkQfnzs-\",\"guide_changelog.md\":\"D8pylW3U\",\"component_upload.md\":\"CV0jL2G9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Dwen Design Uni\",\"description\":\"一个参照wot-design打造的uni-app组件库\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/wot-design.png\",\"lastUpdated\":{\"text\":\"最后更新\"},\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"A74X2RFXSU\",\"apiKey\":\"6961856d63f5181bf71cb4fa3e4398d2\",\"indexName\":\"wot-design-uni2\"}},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present dwen\"},\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"/guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"}]},{\"text\":\"组件\",\"activeMatch\":\"/component/\",\"items\":[{\"text\":\"基础组件\",\"link\":\"/component/button\"}]},{\"text\":\"周边生态\",\"items\":[{\"text\":\"快速上手项目\",\"link\":\"https://github.com/Moonofweisheng/wot-demo\"},{\"text\":\"Vue3 uni-app路由库\",\"link\":\"https://moonofweisheng.github.io/uni-mini-router/\"},{\"text\":\"多平台小程序CI工具\",\"link\":\"https://github.com/Moonofweisheng/uni-mini-ci\"},{\"text\":\"Uni Helper\",\"link\":\"https://uni-helper.js.org/\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"}],\"/component/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"link\":\"/component/button\",\"text\":\"Button 按钮\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>